﻿<template>
  <el-radio-group v-model="direction">
  <el-radio label="ltr">从左往右开</el-radio>
  <el-radio label="rtl">从右往左开</el-radio>
  <el-radio label="ttb">从上往下开</el-radio>
  <el-radio label="btt">从下往上开</el-radio>
</el-radio-group>
<el-button @click="drawer = true" type="primary" style="margin-left: 16px;">
  点我打开</el-button>
<el-drawer
  title="登飞来峰"
  v-model="drawer"
  :direction="direction"
  :before-close="handleClose"
  destroy-on-close
>
  <span>飞来山上千寻塔，闻说鸡鸣见日升。不畏浮云遮望眼，自缘身在最高层。</span>
</el-drawer>
</template>
<script>
  export default {
    data() {
      return {
        drawer: false,
        direction: 'rtl',
      }
    },
    methods: {
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then((_) => {
            done()
          })
          .catch((_) => {})
      },
    },
  }
</script>
